<template>
  <div>
    <div>
      <div class="bgy-screen-top">
        <div class="top-left">
          <div class="top-logo"></div>
        </div>
        <div class="top-center relative">
          <div class="top-title"></div>
          <div class="top-light"></div>
        </div>
        <div class="top-right" style="padding-top: 25px">

          <div class="clear top-right-con">
            <div class="left top-right-user"><zz-user width="33" marginRight="0"></zz-user></div>
            <span class="userName left">{{currentUser.mName}}</span>
          </div>

          <div class="top-right-left"></div>

          <p class="top-right-con" @click="quit">
            <i class="iconfont icon-tuichu" title="退出"></i>
          </p>

          <p class="top-right-con" @click="fullScreen" v-if="isFullScreen">
            <i class="iconfont icon-daquanping" style="font-size: 24px" title="全屏"></i>
          </p>

          <p class="top-right-con" @click="exitScreen" v-else>
            <i class="iconfont icon-tuiquanping" style="font-size: 24px" title="退出全屏"></i>
          </p>

          <p class="top-right-con" @click="pushScreen" v-if="currentUser.admin">
            <i class="iconfont icon-daping" title="大屏模式"></i>
          </p>
        </div>
      </div>
    </div>
    <div class="map-screen" :style="{height: `${contentHeight}px`}">
      <div class="project_list" :style="{height: `${contentHeight}px`}">
        <zz-frame width="370px" :height="`${contentHeight - 132}px`">
          <div>
            <div class="until_title">视频监控项目列表</div>
            <zz-search
              background="rgba(12, 69, 95, 0.4)"
              :width="330"
              :height="35"
              :searchTop="4"
              @searchClick="searchArea"
              holder="请输入项目名称"
              borderColor="#136387">
            </zz-search>
            <div class="retrieve-area" :style="{height:`${contentHeight*.8 - 95}px`}">
              <div class="area-top clear">
                <div class="title-area">区域/城市公司</div>
                <div class="title-project">项目列表</div>
              </div>
              <div class="clear area-com" :style="{height:`${contentHeight*.8 - 130}px`}">
                <div class="left area" v-bar>
                  <div>
                    <p class="area-line" :class="{'area-hover': adminHover}" v-if="videoCompanyAdmin" @click="adminClick(null)">集团总部</p>
                    <div v-for="item in enterprisePassCheck" class="clear" :class="{adminPadding: currentUser.advancedAdmin}">
                      <p
                        class="left area-line"
                        :class="{'area-hover': item.hover}"
                        @click="findProjectList(item)">
                        <i class="iconfont icon-dingweiweizhi"></i>
                        <span>{{item.departmentName}}</span>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="left area-project" v-bar>
                  <div>
                    <div v-for="item in projectPassCheck">
                      <p
                        class="left area-line"
                        @click="projectClick(item)">
                        <span v-if="item.status === 1" :title="item.projectTitle">{{item.projectTitle}}</span>
                        <span v-else class="offlineColor" v-tooltip="'该项目已离线'">{{item.projectTitle}}</span>
                        <i v-if="item.aiId" class="iconfont icon-right icon-aiVideo right" v-tooltip="'该项目有智能监控系统'"
                        :class="item.warnType ? 'shrink-icon' : ''"
                        :style="{color: item.warnType ? 'red' : ''}"></i>
                        <i v-else-if="item.type === 2" class="iconfont icon-image right" v-tooltip="'该项目有图片集'"
                           :class="item.warnType ? 'shrink-icon' : ''"
                           style="font-size: 14px; margin-right: 11px"
                           :style="{color: item.warnType ? 'red' : ''}"></i>
                        <i v-else-if="item.type === 1" class="iconfont icon-zu31 right" v-tooltip="'该项目有视频监控'"
                           :class="item.warnType ? 'shrink-icon' : ''"
                           style="font-size: 14px; margin-right: 11px"
                           :style="{color: item.warnType ? 'red' : ''}"></i>
                         <!-- <i v-if="item.warnType && item.warnType.indexOf('明火') !== -1" class="iconfont icon-right icon-huo right" style="color: red" v-tooltip="'明火'"></i>
                         v-if="item.aiId"
                         <i v-if="item.warnType && item.warnType.indexOf('烟雾') !== -1" class="iconfont icon-right icon-yangantanceqi right" style="color: red" v-tooltip="'烟雾'"></i> -->
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </zz-frame>
        <zz-frame width="100%" height="120px" style="margin-top: 10px">
          <div class="until_title">视频插件</div>
          <div class="uploadOCX">
            <a :href="`${this.$site.libServer}/OCX-OpenAPI.exe`"><i class="iconfont icon-xiazai-bgy">下载视频插件</i></a>
          </div>
        </zz-frame>
      </div>
      <div class="project_map" >
        <div class="banner"></div>
        <div class="project_mainMap">
          <div class="mainMap">
            <zz-frame width="100%" height="100%">
              <div class="until_title">视频监控在线项目分布</div>
              <div :style="{height: `${contentHeight-240}px`}">
                <chinaMap ref="projectMap" :warnProjects="warnProjects" :chooseProject="chooseProject" @Offline="setOfflineProject"></chinaMap>
              </div>
            </zz-frame>
          </div>
          <div class="mainData" style="overflow: hidden">
            <zz-frame width="365px" height="100%">
              <div class="until_title">
                <span>今日数据</span>
                <p class="right day_time">{{time}}</p>
              </div>

              <div class="mainData_item" :style="{height: `${(contentHeight-280) / 3}px`}">
                <div class="mainData_itemHead1">
                  <div class="mainData_itemHeadInfo" >
                    <h3>{{Math.round(areaRate)}}%</h3>
                    <div class="mainData_itemHeadDes">区域在线率</div>
                  </div>
                </div>
                <div class="clear" :style="{height: `${(contentHeight-600) / 3}px`}">
                  <div class="mainData_itemInfo left" style="margin-right: 10px">
                    <div>
                      <div class="mainData_itemNum"><span>{{areaOnline}}</span>个</div>
                      <div>视频监控在线区域</div>
                    </div>

                  </div>
                  <div class="mainData_itemInfo left">
                    <div>
                      <div class="mainData_itemNum"><span>{{areaOffice}}</span>个</div>
                      <div>视频监控离线区域</div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="mainData_item" :style="{height: `${(contentHeight-280) / 3}px`}">
                <div class="mainData_itemHead2">
                  <div class="mainData_itemHeadInfo" >
                    <h3>{{Math.round(videoNode.companyRate)}}%</h3>
                    <div class="mainData_itemHeadDes">项目在线率</div>
                  </div>
                </div>
                <div class="clear" :style="{height: `${(contentHeight-600) / 3}px`}">
                  <div class="mainData_itemInfo left" style="margin-right: 10px">
                    <div>
                      <div class="mainData_itemNum"><span>{{videoNode.company}}</span>个</div>
                      <div>视频监控在线项目</div>
                    </div>

                  </div>
                  <div class="mainData_itemInfo left">
                    <div>
                      <div class="mainData_itemNum"><span>{{videoNode.companyOffline}}</span>个</div>
                      <div>视频监控离线项目</div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="mainData_item mainData_itemEnd" :style="{height: `${(contentHeight-280) / 3}px`}">
                <div class="mainData_itemHead3">
                  <div class="mainData_itemHeadInfo" >
                    <h3>{{Math.round(videoNode.devRate)}}%</h3>
                    <div class="mainData_itemHeadDes">摄像头在线率</div>
                  </div>
                </div>
                <div class="clear" :style="{height: `${(contentHeight-600) / 3}px`}">
                  <div class="mainData_itemInfo left" style="margin-right: 10px">
                    <div>
                      <div class="mainData_itemNum"><span>{{videoNode.dev}}</span>个</div>
                      <div>在线摄像头</div>
                    </div>
                  </div>
                  <div class="mainData_itemInfo left">
                    <div>
                      <div class="mainData_itemNum"><span>{{videoNode.devOffline}}</span>个</div>
                      <div>离线摄像头</div>
                    </div>
                  </div>
                </div>
              </div>

            </zz-frame>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import mixin from './mixin'
  import { mapGetters } from 'vuex'
  export default {
    name: 'zz-map',
    data () {
      return {
        adminHover: true,
        isFullScreen: true,
        isFirst: true,
        time: '',
        areaOnline: 0,
        areaOffice: 0,
        areaRate: 0,
        enterprisePassCheck: [],
        offlineProjects: [],
        chooseProject: [],
        warnProjects: {},
        projectPassCheck: [],
        projectNode: null,
        warnId: null,
        warnType: null,
        warnInterval: null,
        warnIndex: 0,
        warnListSet: new Set(),
        warnList: [],
        videoCompanyAdmin: false   // 是否显示集团总部
      }
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser',
        videoNode: 'getVideoNode',
        incomingProjectNode: 'incomingProjectNode'
      })
    },
    components: {
      chinaMap (resolve) {
        require(['./chinaMap.vue'], resolve)
      }
    },
    mixins: [mixin],
    mounted () {
      this.findUserDataAccessRange()
      this.setTime()
      this.getAreaOnlineRate()
      if (this.videoNode.first) {
        this.$store.commit('setVideoNodeCompany', {first: false})
        this.getOnlineRate()
      }
      this.getOnlineRateInterval = setInterval(() => {
        this.getOnlineRate()
      }, 1000 * 60 * 5)
      this.projectNode = new this.$Node({
        group: `COMPANY_GROUP_${this.currentUser.coId}`,
        mName: this.currentUser.mName
      })
    },
    beforeRouteLeave (to, from, next) {
      window.clearInterval(this.timer)
      window.clearInterval(this.getOnlineRateInterval)
      if (this.projectNode.options.nodejsServer) {
        this.projectNode.logout()
      }
      next()
    },
    watch: {
      incomingProjectNode (item) {
        this.warnListSet.add(item)
        // 存储警报信息
        setTimeout(() => {
          this.warnListSet.delete(item)
        }, 1000 * 60 * 3)
        if (!this.warnInterval) {
          this.warnInterval = setInterval(() => {
            this.warnListFun()
          }, 1000 * 10)
        }
      }
    },
    methods: {
      // 是否有集团总部数据权限
      findUserDataAccessRange () {
        return new Promise(resolve => {
          let data = {
            'dataAccessRange.company_id': this.currentUser.coId,
            'dataAccessRange.fun_code': 'c_video_screen_view'
          }
          this.$axios({
            method: 'post',
            url: `${this.$site.companyServer}/front/findUserDataAccessRange.htm`,
            data: this.$qs.stringify(data)
          }).then(res => {
            if (res.data.dataAccessRange.code === 5) {
              this.videoCompanyAdmin = true
            } else {
              this.videoCompanyAdmin = false
            }
            resolve()
          })
        })
      },
      setProjectNode (project) {
        let projectIds = this.warnList.map((item) => item.projectId)
        this.projectPassCheck = this.projectPassCheck.map((obj) => {
          obj.warnType = ''
          if (projectIds.includes(obj.projectId)) {
            obj.warnType = project.typeName
          }
          if (obj.projectId === project.projectId) {
            this.warnProjects = project
          }
          return obj
        })
      },
      warnListFun () {
        this.warnList = [...this.warnListSet]
        let length = this.warnList.length
        if (length > 0) {
          if (this.warnIndex > length - 1) {
            this.warnIndex = 0
          }
          let obj = {...this.warnList[this.warnIndex], ...{}}
          this.setProjectNode(obj)
          this.warnIndex++
        } else {
          window.clearInterval(this.warnInterval)
          this.warnInterval = null
          this.projectPassCheck = this.projectPassCheck.map((obj) => {
            obj.warnType = ''
            return obj
          })
          this.warnProjects = {}
        }
      },
      searchArea (value) {
        this.projectName = value
        this.findProjectList()
      },
      setOfflineProject (items) {
        this.offlineProjects = items.map(item => item.projectId)
        this.getEnterprisePassCheck()
      },
      fullScreen () {
        this.$fullScreen()
        this.isFullScreen = false
      },
      exitScreen () {
        this.$fullExit()
        this.isFullScreen = true
      },
      setTime () {
        this.time = this.$moment().format('YYYY-MM-DD, HH:mm:ss')
        setInterval(() => {
          this.time = this.$moment().format('YYYY-MM-DD, HH:mm:ss')
        }, 1000)
      },
      quit () {
        this.$axios({
          method: 'post',
          closeLoading: true,
          url: `${this.$site.passportServer}/front/logout.htm`
        }).then(res => {
          this.$store.commit('resetCurrUser')
          this.$store.commit('resetVideoNode')
          this.$router.push({name: 'login'})
        }).catch(res => {
          this.$store.commit('resetCurrUser')
          this.$store.commit('resetVideoNode')
          this.$router.push({name: 'login'})
        })
      },
      getOnlineRate () {
        let departmentId = this.currentUser.departmentId
        let departmentName = this.currentUser.departmentName
        if (this.currentUser.advancedAdmin) {
          departmentId = ''
          departmentName = ''
        }
        const data = {
          mid: this.currentUser.mid,
          coId: this.currentUser.coId,
          departmentId: departmentId,
          departmentName: departmentName
        }
        this.$axios({
          method: 'post',
          closeLoading: true,
          closeMessage: true,
          url: `${this.$site.videoServer}/api/hikvision8700/getOnlineRate`,
          data: this.$qs.stringify(data)
        }).then(res => {
          this.$store.commit('setVideoNode', res.data.data)
        })
      },
      getEnterprisePassCheck () {
        let departmentId = this.currentUser.departmentId
        if (this.videoCompanyAdmin) {
          departmentId = ''
        }
        const data = {
          'mid': this.currentUser.mid,
          'departmentId': departmentId,
          'coId': this.currentUser.coId
        }
        this.$axios({
          method: 'post',
          closeLoading: true,
          url: `${this.$site.videoServer}/api/hikvision8700/getEnterprisePassCheckByAllVideos`,
          data: this.$qs.stringify(data)
        }).then(res => {
          this.enterprisePassCheck = res.data.data.map((item) => {
            item.hover = false
            return item
          })
          if (this.currentUser.admin || this.currentUser.departmentType === 10 || this.videoCompanyAdmin) {
            this.getAllVideosByTopOrg()
          } else {
            this.findProjectList(this.enterprisePassCheck[0])
          }
        })
      },
      getAllVideosByTopOrg () {
        let departmentId = this.currentUser.departmentId
        if (this.videoCompanyAdmin) {
          departmentId = ''
        }
        const data = {
          'departmentId': departmentId,
          'coid': this.currentUser.coId
        }
        this.$axios({
          method: 'post',
          closeLoading: true,
          url: `${this.$site.videoServer}/api/hikvision8700/getAllVideosByTopOrg`,
          data: this.$qs.stringify(data)
        }).then(res => {
          this.projectPassCheck = res.data.data.map(item => {
            if (this.offlineProjects.includes(item.projectId)) {
              item.status = 2
            } else {
              item.status = 1
            }
            return item
          })
          this.addprop()
        })
      },
      getAreaOnlineRate () {
        const data = {
          'mid': this.currentUser.mid,
          'departmentId': this.currentUser.departmentId,
          'coId': this.currentUser.coId
        }
        this.$axios({
          method: 'post',
          closeLoading: true,
          url: `${this.$site.videoServer}/api/hikvision8700/getAreaOnlineRate`,
          data: this.$qs.stringify(data)
        }).then(res => {
          const {areaOnline, areaTotal} = res.data.data
          this.areaOnline = areaOnline
          this.areaOffice = areaTotal - areaOnline
          if (areaOnline) {
            this.areaRate = (areaOnline / areaTotal).toFixed(2) * 100
          } else {
            this.areaRate = 0
          }
        })
      },
      // 获取项目
      adminClick () {
        this.chooseProject = []
        this.enterprisePassCheck.map((item) => {
          item.hover = false
          return item
        })
        this.adminHover = true
        this.getAllVideosByTopOrg()
      },
      findProjectList (node) {
        let departmentId = ''
        this.adminHover = false
        this.enterprisePassCheck.map((item) => {
          item.hover = false
          return item
        })
        if (node) {
          node.hover = true
          departmentId = node.departmentId
        } else {
          this.adminHover = true
        }
        const data = {
          'mid': this.currentUser.mid,
          'coId': this.currentUser.coId,
          'departmentId': departmentId,
          'projectName': this.projectName
        }
        this.$axios({
          method: 'post',
          closeLoading: true,
          url: `${this.$site.videoServer}/api/hikvision8700/getProjectPassCheckByAllVideos`,
          data: this.$qs.stringify(data)
        }).then(res => {
          this.projectPassCheck = res.data.data.map(item => {
            if (this.offlineProjects.includes(item.projectId)) {
              item.status = 2
            } else {
              item.status = 1
            }
            return item
          })
          this.addprop()
          this.chooseProject = res.data.data
        })
      },
      projectClick (item) {
        if (item.aiId) {
          this.$router.push({name: 'AIvideo', query: {pjId: item.projectId, name: item.projectTitle}})
        } else if (item.type === 2) {
          this.$router.push({name: 'picture', query: {pjId: item.projectId, name: item.projectTitle}})
        } else {
          this.$router.push({name: 'videoProject', query: {pjId: item.projectId, name: item.projectTitle}})
        }
      },
      pushScreen () {
        if (this.currentUser.advancedAdmin) {
          this.$router.push({name: 'video', query: {departmentId: '', name: '集团总部'}})
        } else {
          this.$router.push({name: 'video', query: {departmentId: this.currentUser.departmentId, name: this.currentUser.departmentName}})
        }
      },
      addprop () {
        // 增加属性
        this.projectPassCheck = this.projectPassCheck.map(function (obj, index) {
          obj.warnType = ''
          // 添加type属性
          return obj
        })
        // console.log(this.projectPassCheck)
      }
    }
  }
</script>

<style lang="scss">
.area-project {
  .area-line {
    height: 25px;
    span {
      display: inline-block;
      width: 85%;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 25px;
    }
  }
}
</style>

